<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
.hide{display:none}
button{width:50px;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*lightbox*/
#box{ border:1px solid  #666; width:380px; height:280px; padding:10px; background:#fff; display:none; overflow:hidden}
#box h2{ font-size:16px; padding-bottom:8px; position:relative}
#box h2 span{ position:absolute; font-weight:normal; font-size:12px; cursor:pointer; top:5px; right:5px; width:15px; height:15px; line-height:15px; color:#fff; background:#999; text-align:center}
#box p{font-size:14px; width:380px;}
</style>
<script type="text/javascript" src="../js/min/base-min.js"></script>
<script type="text/javascript" src="../js/min/LightBox-min.js"></script>
<script type="text/javascript">
	window.onload = function(){
		b = new LightBox("box");	
	}

	function go(){
		b.option.modal = Kg.$("cb").checked;
		b.option.pos = Kg.$("sel").value;
		b.option.effect = Kg.$("eff").value;
		b.open();
	}
</script>
</head>

<body>
<div class="effect clearfix" id="e8">
  <pre>调用方法：new LightBox("box");
    </pre>
  <div id="box">
    <h2>这里是标题<span class="close">x</span></h2>
    <p>这里是文章内容！！这里是文章内容！！这里是文章内容！！这里是文章内容！！这里是文章内容！！这里是文章内容！！</p>
  </div>
  <select id="sel">
	<option value="top">顶端定位</option>
	<option value="center">垂直居中定位</option>
	<option value="bottom">底端定位</option>
  </select>
  <select id="eff">
	<option value="normal">Normal</option>
	<option value="fade">fade</option>
	<option value="slide">slide</option>
  </select>
  <input type="checkbox" id="cb"/>开启黑幕
  <div><button onclick="go()">打开</button></div>
</div>
<div id="modal_layer"></div>
</body>
</html>
